<template>
	<text class="iconfont icon-xiangzuojiantou ">详情</text>
	
	<view class="dd">
	</view>

	<view>
		<view class="ss">
			<input class="ee" v-model="na" type="text" placeholder="请输入关键字" placeholder-class="iconfont icon-Magnifier"/>
			<button type="default" @click="cx" size="mini" class="bt">查询</button>
		</view>
		<view class="vv">
			<picker mode="selector" :range="['综合排序','销售量','价格']" @change="" >
				<button type="default" size="mini">综合排序 <span class="iconfont icon-shanglajiantou"></span></button>
				<view></view>
			</picker>
			
			<picker mode="selector" :range="['欧姆龙','胶囊剂','拜耳','同仁堂']" @change="">
				<button type="default" size="mini">品牌 <span class="iconfont icon-shanglajiantou"></span></button>
				<view></view>
			</picker>
			
			<picker mode="selector" :range="['片剂','赛诺菲','颗粒剂','口服药剂']" @change="">
				<button type="default" size="mini">剂型 <span class="iconfont icon-shanglajiantou"></span></button>
				<view></view>
			</picker>
		</view>
		<view class="con" >
			<navigator url="/pages/classification-Details/classification-Details">
				<view class="conn" v-for="(v,i) in tt" :key="v.id" @click="xx(v)">
					<view id="con-a">
						<image :src="IP+v.img" mode=""></image>
					</view>
					<view id="con-b" >
						<!-- 络活喜 苯磺酸氨氯地平片 5mg*7片 -->
						<text class="rx">Rx</text>{{v.tit}}
						<view class="nn">￥{{v.qian}}.00 </view>
						
					</view>
				</view>
			
			</navigator>
			
		


		</view>


	</view>

</template>

<script>
	import {ref} from 'vue'
	import { useStore } from 'vuex'
	export default {
		
		setup(){
			 const {state,commit} = useStore()
			 let tt=ref({})
			 let IP=ref({})
			 let na=ref()
			 
			 tt.value=state.classification.a
			 IP.value=state.IP
			function xx(v){
				// console.log(v)
			commit('classification/soo',v)
							  
			}
			function cx(){
				tt.value=state.classification.a
				if(na.value){
						let p=tt.value.filter((v)=>{
								return v.tit.indexOf(na.value)!=-1
							})
							// console.log(p)
							tt.value=[]
							p.forEach((v,i)=>{
								tt.value.push(v)
							})
							
				}
			}
			return{
				tt,
				xx,
				IP,
				cx,
				na
			}
		},
		data() {
			return {
				
			}

		},
		methods: {

		}, 
		
	}
</script>

<style >
	@import url("~@/static/fonts/iconfont.css");

	ul {
		margin: 0;
		padding: 0;
	}

	.rx {
		display: inline-block;
		background-color: #DA2222;
		color: #FCFFFF;
		width: 40rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.nn {
		color: #FF0000;
		margin-top: 20rpx;
	}

	.con {
		position: absolute;
	}

	.conn {
		width: 750rpx;
		display: flex;
		height: 200rpx;
		border: 1rpx #F2F2F2 solid;
	}

	.conn #con-a {
		width: 250rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.conn #con-b {
		width: 500rpx;
	}


	.conn image {
		width: 128rpx;
		height: 94rpx;

	}

	.bgk {
		background-color: #B3B3B3;
		/* background-color:#676767; */
		border: 1rpx #AAAAAA solid;
	}

	
	.i {
		background-color: #FFFFFF;

	}

	.ss {
		margin: 20rpx 0;
		display:  flex;
		width: 750rpx;
	}
	.ss .ee{
		width: 600rpx;
		
	}
	.ss .bt{
		width: 150rpx;
		text-align: center;
		padding: 20rpx 0;
	}
	

	.vv {
		display: flex;
		width: 750rpx;

	}

	.vv button {
		width: 250rpx;
		background-color: #FFFFFF;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.dd {
		height: 1rpx;
		background-color: #F2F2F2;
		margin: 20rpx 0;
	}

	.ee {
		border-radius: 50rpx;
		border: 1rpx solid #E2E2E2;
		margin: 0 20rpx;
		padding: 20rpx 0;
	}

	.icon-Magnifier {
		font-weight: 700;
	}


</style>
